<!DOCTYPE html>
<html lang='zh-cn'>
    <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: #f00;
            -webkit-transition: all .6s linear;
            -o-transition: all .6s linear;
            transition: all .6s linear;
        }
        .box-bg{
            background: url(img/tourism2.png);
        }
        .box-bg1{
            background: url(img/tourism1.png);
        }
    </style>
    </head>
    <body>
        <div id="box" class="box box-bg"></div>
        <div id="animation">动画</div>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $("#animation").click(function(){
                $("#box").addClass("box-bg1");
            })
        </script>
    </body>
</html>